<style lang="scss" scoped>
dl {
    display: flex;
    flex-direction: column;

    dt {
        padding: 10px;

        img {
            width: 100%;
            height: 300px;
        }
    }

    dd {
        display: flex;
        flex-direction: column;
        font-size: 14px;

        .divtitle {
            display: flex;
            align-items: center;
            height: 30px;

            span {
                padding: 2px;
                font-size: 8px;
                color: #fff;
                background-color: rgb(248, 86, 54);
                border-radius: 10px;
            }

            h3 {
                margin-left: 5px;
            }
        }

        .divspan1 {
            font-size: 12px;
            color: rgb(155, 155, 155);
            line-height: 20px;
            padding: 10px;
        }

        .divKu {
            padding: 10px;

            span {
                font-size: 12px;
                color: rgb(155, 155, 155);
                line-height: 20px;
            }
        }

        .divMoeny {
            display: flex;
            justify-content: space-between;
            padding: 10px;

            span {
                font-weight: 600;
            }
        }

        .divdesc {
            display: flex;
            flex-direction: column;

            h4 {
                width: 100px;
                padding: 3px 10px;
            }

            p {
                text-indent: 2em;
                padding: 5px;
            }
        }
    }
}

.footer {
    width: 100vw;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;

    .eee {
        width: 90%;
        height: 100%;
        border-radius: 50px;
    }
}
</style>
<template>
    <div class="box">
        <van-nav-bar title="药品详情" left-text="返回" left-arrow @click-left="router.go(-1)" />
        <dl>
            <dt>
                <img :src="DataList.restorativesimage" alt="">
            </dt>
            <dd>
                <div class="divtitle">
                    <span>{{ DataList.restorativestitle }}</span>
                    <h3>{{ DataList.restorativesname }}</h3>
                </div>
                <div class="divKu">
                    <span>库存:{{ DataList.restorativesinven }}</span>
                </div>
                <div class="divMoeny">
                    <span>用药建议:{{ DataList.restorativesstate }}</span>
                </div>
                <div class="divspan1">
                    <span>出售量:{{ DataList.restorativescount }}</span>
                </div>
                <div class="divdesc">
                    <h4>介绍:</h4>
                    <p>{{ DataList.restorativesdesc }}</p>
                </div>
            </dd>
        </dl>
        <div class="footer">
            <van-button type="primary" class="eee" @click="onOk">添加</van-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import router from '@/router';
import { useCartStore } from '@/stores/cart';
import axios from 'axios';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const ListId = ref(route.query.id);
interface doctorList {
    restorativestitle: string,
    restorativesstate: string,
    restorativesprice: number,
    restorativesname: string,
    restorativesinven: string,
    restorativesimage: string,
    restorativesid: number,
    restorativesdesc: string,
    restorativescount: string
}
const DataList = ref({} as doctorList)
const Datageta = () => {
    axios.get('/api/restorative/detail', { params: { id: ListId.value } }).then(res => {
        DataList.value = res.data.data[0]
    })
}
Datageta()
const { addCart } = useCartStore()
const onOk = () => {
    alert('添加成功')
    addCart(DataList.value)
}
</script>